<script setup>
import { ref } from 'vue'
import GunExp from '../components/exp/GunExp.vue'
import WeaponExp from '../components/exp/WeaponExp.vue'
import PlayerExp from '../components/exp/PlayerExp.vue'
import SiteNotice from '../components/SiteNotice.vue'

const expType = ref(0)
</script>

<template>
  <article>
    <SiteNotice/>
    <nav>
      <input id="gun-exp" type="radio" v-model="expType" :value="0">
      <label for="gun-exp">人形经验</label>
      <input id="weapon-exp" type="radio" v-model="expType" :value="1">
      <label for="weapon-exp">武器熟练度</label>
      <input id="player-exp" type="radio" v-model="expType" :value="2">
      <label for="player-exp">指挥官阅历</label>
    </nav>
    <GunExp v-if="expType == 0" />
    <WeaponExp v-else-if="expType == 1" />
    <PlayerExp v-else />
  </article>
</template>

<style scoped>
label {
  margin: 0 0.5em 0 0.25em;
}
</style>
